<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue.extend() 返回的是一个 VueComponent 构造函数

      这个函数不是我们去new 的. 而是当组件使用时, vue 内部帮我们 new 的.

     -->

    <div id="app">
      <person></person>

      <xxxx></xxxx>

      <yyyy></yyyy>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      // 1. Vue.extend(options)
      //   const person = Vue.extend({
      //     template: `
      //         <div>
      //             <h1>姓名：张三</h1>
      //         </div>
      //     `,
      //   });

      //   2. const person = {}
      //       如果这样去定义组件，当注册时，Vue内部会去将这个对象使用 Vue.extend 调用
      //   const person = {
      //     template: `
      //         <div>
      //             <h1>姓名：张三</h1>
      //         </div>
      //     `,
      //   };
      //   Vue.component("person", person);

      //   定义与注册一起做
      Vue.component("person", {
        // 1. template定义组件模板
        // template: `
        //     <div>
        //         <h1>姓名：张三</h1>
        //         <p>年龄：18</p>
        //     </div>
        // `,
        // 2. render 定义组件模板  createElmenet  document.createElmenet
        //          1. render 需要定义成一个函数
        //          2. render 函数会接受一个 createElement 的参数，这个参数也是一个函数
        //          3. 需要 return createElment 创建的虚拟元素(节点)
        //          4. 这里的 createElmenet 返回是 虚拟DOM VDOM
        //          5. 每个节点叫做,虚拟节点 VNode
        // template与render的区别
        // 1. template 更人性化，render 使用太麻烦了。
        // 2. 作用都一样
        // 3. 我们推荐使用 template
        // 4. 其实 我们使用 template Vue 内容会将 template 的内容转换成 render
        render: function (createElement) {
          //   return createElement("元素名称", "元素属性", "元素内容");
          return createElement(
            "h1",
            {
              attrs: {
                title: "hello",
              },
            },
            "我是一个H1"
          );
        },
      });

      Vue.component("xxxx", {
        render(createElement) {
          console.log("render 被执行了");
          //   虚拟DOM本质上是个啥
          var vnode = createElement(
            "div",
            {
              attrs: {
                title: "hello",
              },
            },
            "我是一个div"
          );
          console.log(vnode);

          return createElement("div", null, [
            createElement("h1", null, "姓名：张三"),
            createElement("p", null, "年龄：18"),
          ]);
        },
      });

      Vue.component("yyyy", {
        data: {
          name: "里斯",
        },
        template: `
            <div>
                <h1>姓名：里斯</h1>
                <p>年龄：18</p>
            </div>
        `,
      });

      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
